<template>
	<div>
		<el-row class="ContentTable" :gutter="20">
			<el-col :span="24">
				<!--<queryFrom @Refresh="Refresh" ref="queryFrom"></queryFrom>-->
				<el-table :data="tableData" class="table" ref="table" highlight-current-row @selection-change="handleSelectionChange" height='500' border>
					<el-table-column type="selection" min-width="10%">
					</el-table-column>
					<el-table-column property="name" label="角色名称" min-width="50%">
					</el-table-column>
					<el-table-column property="remark" label="备注" min-width="50%">
					</el-table-column>
				</el-table>
				<pageBox :totalNum="totalNum" ref="pageBox" @Refresh='Refresh'></pageBox>
			</el-col>
		</el-row>
		<!--         <el-row class="ButtomBtn">
            <el-col :span="24"> -->
		<div>
			<el-button style="width:120px" type="primary" @click="OnSubmit">保存</el-button>
			<el-button style="width:120px" @click="Hiden(2)">取消</el-button>
		</div>
		<!--             </el-col>
        </el-row> -->
	</div>
</template>
<script>
	import queryFrom from '../../SystemRoleView/form/QueryForm.vue'
	import pageBox from '../../../Common/Page1.vue'
	export default {
		mounted() {},
		components: {
			queryFrom,
			pageBox
		},
		props: ['staff'],
		data() {
			return {
				tableData: null,
				selectedRow: [],
				pageInfo: {
					current: 1,
					size: 200,
					keyword: ''
				},
				queryInfo: {},
				totalNum: 0,
				queryUrl: 'tSysRole/page',
				controller: 'SystemRole',
				dynmicList: [],
				allSelectList: []
			}
		},
		methods: {
			handleSelectionChange(val) {
				/*
				多选直接写入这句话
				this.selectedRow = val
				 */
				this.selectedRow = val
				//单选就下面三句话，其他代码后来人员自己理解，没有注释，这个页面也不是我写的 - -！
				// this.selectedRow = val.slice(val.length - 1)
				// this.selectedRow.forEach((item) => {
				//     this.allSelectList.push(item);
				// });
				// this.RevertData(this.allSelectList, 'id');
			},
			Refresh(queryInfo, type) {
				if(queryInfo == undefined) {
					queryInfo = {};
				}
				let page = this.pageInfo;
				if(this.$refs.pageBox != undefined) {
					page = this.$refs.pageBox.GetPageInfo();
				}
				queryInfo.current = page.current;
				queryInfo.size = page.size;
				this.selectedRow.forEach((item) => {
					this.allSelectList.push(item);
				});
				this.ajax({
					url: this.queryUrl,
					data: queryInfo,
					success: function(data) {
						this.tableData = data.records;
						if(data.total != this.totalNum) {
							this.totalNum = data.total;
						}
						if(type == 1) {
							this.GetStaffRoles();
						}
					}
				})
			},
			GetStaffRoles() { //获取人员角色管理信息
				this.ajax({
					url: 'tSysUser/selectUserRoles?id=' + this.staff.id,
					success: function(data) {
						this.allSelectList = [];
						for(var i = 0; i < data.length; i++) {
							this.allSelectList.push({
								id: data[i]
							});
						}
						//this.allSelectList=data
						this.RevertData(this.allSelectList, 'id');
					}
				})
			},
			Hiden(type) { //type:1,保存，2，取消
				this.$emit('Show', false);
				if(type == 1) {
					this.$emit("Refresh");
				}
			},
			ClearData() {
				//this.$refs.queryFrom.InitQuery();
				//this.$refs.pageBox.InitPageInfo();
			},
			OnSubmit() {
				this.selectedRow.forEach((item) => {
					this.allSelectList.push(item);
				});

				var roleids = "";
				for(var i = 0; i < this.allSelectList.length; i++) {
					roleids += this.allSelectList[i].id + ",";
				}
				var data = {
					uId: this.staff.id,
					rId: roleids
				}
				this.ajax({
					url: 'tSysUserRole/confUserRole',
					type: 'post',
					data: data,
					success: function(data) {
						this.Hiden(1);
					}
				});
			},
			RevertData(list, idStr) { //根据人员角色关联数据动态设置勾选状态,idStr:与表格数据做判断依据的字段名称
				if(this.tableData != null) {
					this.tableData.forEach((item) => { //遍历，判断表格数据是否符合关联数据
						let isSelect = false;
						for(let i = 0; i < list.length; i++) {
							if(list[i][idStr] == item.id) {
								isSelect = true;
								list.splice(i, 1);
								break;
							}
						}
						this.$refs.table.toggleRowSelection(item, isSelect); //根据判断，设置勾选
					});
				}
			}
		},
		updated() {
			this.$nextTick(function() {
				//   this.RevertData(this.allSelectList, 'roleId');
			});
		},
		created() {
			this.Refresh(null, 1);
		}

	}
</script>
<style scoped>
	.ContentTable {
		width: 1000px;
		height: 500px
	}
	
	.ButtomBtn {
		width: 1000px;
		height: 40px;
		text-align: right;
	}
</style>